<template>
    <div class="home-main-container">

        <!-- SEO信息 -->

        <Head>
            <Title>{{ settingInfo.title }}</Title>
            <Meta name="description" :content="settingInfo.description" />
        </Head>

        <!-- 布局开始 -->
        <NuxtLayout name="home">

            <!-- 布局左侧 -->
            <template #left>

                <show-swiper :swiper-list="swiperList.data"></show-swiper>

                <!-- 左侧正文开始 -->
                <div class="content-container-box">
                    <t-card class="content-item shadow-xl" :bordered="false" v-for="(item, index) in contentList.data.list"
                        :key="index">
                        <t-row :gutter="30">
                            <t-col :span="4">
                                <div class="content-thumbnail">
                                    <router-link :to="`/topic/${item.cs_id}`">
                                        <t-image :src="item.thumbnail" fit="contain"
                                            :style="{ width: '100%', height: '135px' }" />
                                    </router-link>
                                </div>
                            </t-col>
                            <t-col :span="8" style="height: 135px;">
                                <div class="content-info flex flex-col justify-between h-full">
                                    <span class="title text-lg font-semibold "
                                        style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                        <router-link class="hover:text-[#0052d9]  transition duration-700 ease-in-out"
                                            :to="`/topic/${item.cs_id}`">
                                            {{ item.title }}
                                        </router-link>
                                    </span>
                                    <span class="descripition indent-1 mt-[8px] text-gray-500"
                                        style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden;">{{
                item.description }}</span>
                                    <span
                                        class="content-data flex text-sm  justify-end my-[8px] text-[13px] text-gray-600">
                                        <span class="date mx-[8px]">
                                            <t-icon size="15px" name="time" /> {{ item.created_at }}
                                        </span>
                                        <span class="click mx-[8px]">
                                            <t-icon size="17px" name="gesture-click" /> {{ item.click }}
                                        </span>
                                        <span class="like mx-[8px] cursor-pointer" @click="clickLikeIconHandle">
                                            <t-icon size="16px" name="thumb-up-1" /> {{ item.like }}
                                        </span>
                                    </span>
                                </div>
                            </t-col>
                        </t-row>
                    </t-card>
                </div>
            </template>

            <!-- 右侧布局 -->
            <template #right>
                <!-- 最新 -->
                <tile-new-publish></tile-new-publish>
                <!-- 推荐 -->
                <tile-recommend></tile-recommend>
            </template>
        </NuxtLayout>
    </div>
</template>

<script setup>
// 站点信息
const settingInfo = ref({});

// 分页信息
const tablePagination = reactive({
    defaultCurrent: 1,
    defaultPageSize: 15,
    total: 0
})

// 点赞
const clickLikeIconHandle = () => {
    alert('暂时关闭');
}

// 主题列表
const {data:contentList} = await useFetch(`${baseUrl}/content/list/table/${tablePagination.defaultCurrent}/${tablePagination.defaultPageSize}`);

// 获取站点信息
const { data: settingInfos } = await useFetch(`${baseUrl}/setting/query/basic`);
settingInfo.value = JSON.parse(settingInfos.value.data.content)

// 轮播图
const { data: swiperList } = await useFetch(`${baseUrl}/content/get_swiper_list/5`);
console.log(swiperList.value);
</script>

<style lang="scss" scoped></style>